<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>现代化管理系统导航</title>
    <!-- 引入 Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        :root {
            --primary-color: #4361ee;  /* 主色调 */
            --secondary-color: #3f37c9; /* 辅助色 */
            --hover-color: #4895ef;    /* 悬停色 */
            --light-bg: #f8f9fa;       /* 浅色背景 */
            --dark-bg: #2b2d42;        /* 深色背景 */
        }

        /* 顶部导航栏美化 */
        .top-navbar {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;

        }

        .brand-wrapper {
            transition: transform 0.3s ease;
        }
        .brand-wrapper:hover {
            transform: translateX(5px);
        }

        .user-avatar {
            transition: all 0.3s ease;
            border: 2px solid rgba(255,255,255,0.3);
        }
        .user-avatar:hover {
            transform: scale(1.1);
            border-color: white;
        }

        /* 退出按钮美化 */
        #logoutBtn {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            transition: all 0.3s ease;
            color: white;
        }
        #logoutBtn:hover {
            background: rgba(255,255,255,0.2);
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }

        /* 侧边栏美化 */
        #sidebarMenu {
            background: var(--light-bg);
            box-shadow: 2px 0 10px rgba(0,0,0,0.05);
        }

        .nav-item {
            margin: 8px 0;
            position: relative;
        }

        .nav-link {
            color: #495057;
            border-radius: 8px;
            transition: all 0.3s ease;
            padding: 12px 20px !important;
        }

        .nav-link:hover {
            background: var(--hover-color);
            color: white !important;
            transform: translateX(10px);
        }

        .nav-link.active {
            background: var(--primary-color) !important;
            color: white !important;
            font-weight: 500;
            border-left: 4px solid var(--secondary-color);
        }

        .nav-link i {
            margin-right: 12px;
            width: 20px;
            text-align: center;
        }

        /* 搜索框美化 */
        .form-control-dark {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            color: white;
            transition: all 0.3s ease;
        }
        .form-control-dark:focus {
            background: rgba(255,255,255,0.2);
            box-shadow: 0 0 0 3px rgba(255,255,255,0.2);
        }
    </style>
</head>
<body>

<!-- 顶部导航栏 -->
<nav class="navbar navbar-dark sticky-top flex-md-nowrap p-3 top-navbar" th:fragment="topnav" style="background-color: rgba(38,213,246,0.5);">
    <div class="d-flex align-items-center" >
        <div class="brand-wrapper d-flex align-items-center">
            <span class="text-white mr-3" style="font-size: 1.2rem;" th:text="${session.user.name}+' 的管理后台'"></span>
            <img th:src="${session.user.avatar != null} ? @{${session.user.avatar}} : 'https://via.placeholder.com/40'"
                 class="user-avatar rounded-circle"
                 width="40"
                 height="40">
        </div>
    </div>

    <input class="form-control form-control-dark w-50 mx-4" type="text" placeholder="搜索...">

    <div>
        <li class="nav-item text-nowrap"> <!--th:href="@{/logout}"-->
            <!--<a class="nav-link" href="#" >退出</a>-->
            <button class="btn btn-success btn-sm" id="logoutBtn">
                <i class="fas fa-sign-out-alt"></i>
                <span>退出系统</span>
            </button>
            <script>
                document.getElementById('logoutBtn').addEventListener('click', () => {
                    if (confirm("是否确认退出？")) {
                        window.location.href = '/logout';
                    } else {
                        console.log("用户取消了退出操作");
                    }
                });
            </script>
        </li>
    </div>
</nav>

<!-- 侧边栏 -->
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block sidebar collapse">
    <div class="sidebar-sticky pt-4">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link" href="#" th:href="@{/main}"
                   th:classappend="${lurl == 'leftmain'} ? 'active' : ''">
                    <i class="fas fa-home"></i>
                    后台主页
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <i class="fas fa-box-open"></i>
                    商品管理
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" th:href="@{/SalesAnalysis}"
                   th:classappend="${lurl == 'sales'} ? 'active' : ''">
                    <i class="fas fa-chart-line"></i>
                    销售分析
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" th:href="@{/getUserList}"
                   th:classappend="${lurl == 'leftuser'} ? 'active' : ''">
                    <i class="fas fa-users-cog"></i>
                    用户管理
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <i class="fas fa-cog"></i>
                    系统设置
                </a>
            </li>
        </ul>
    </div>
</nav>

<script>
    // 动态效果增强
    document.querySelectorAll('.nav-link').forEach(link => {
        link.addEventListener('mouseenter', () => {
            link.style.transform = 'translateX(10px)';
        });
        link.addEventListener('mouseleave', () => {
            link.style.transform = 'translateX(0)';
        });
    });

    // 退出按钮确认
    document.getElementById('logoutBtn').addEventListener('click', (e) => {
        e.preventDefault();
        if (confirm("确定要退出系统吗？")) {
            window.location.href = '/logout';
        }
    });
</script>

</body>
</html>